<script lang="ts" setup>
import type { CreateReadingQuestion, ReadingQuestionOption } from '@/types'
import { ref } from 'vue'
import message from '@/components/common/message'
import PopPanel from '@/components/common/PopPanel.vue'
import Select from '@/components/common/Select.vue'
import TextArea from '@/components/common/TextArea.vue'
import TextInput from '@/components/common/TextInput.vue'

const props = defineProps<{
  visible: boolean
  initQuestion?: CreateReadingQuestion
  editingIndex: number
}>()
const emit = defineEmits<{
  (e: 'close'): void
  (e: 'confirm', question: CreateReadingQuestion, editingIndex: number): void
}>()

const questionType = ref<0 | 1>(props.initQuestion?.type || 0)
const questionTitle = ref(props.initQuestion?.title || '')
const questionDescription = ref(props.initQuestion?.description || '')
const correctAnswer = ref(props.initQuestion?.correctAnswer || '')
const anaylsis = ref(props.initQuestion?.analysis || '')
const options = ref<ReadingQuestionOption[]>(props.initQuestion?.options || [])

function handleConfirm() {
  if (questionType.value === 0) {
    if (options.value.length === 0) {
      message.error('选择题需要有选项')
      return
    }
    if (options.value.some(i => !i.label || !i.value)) {
      message.error('选项需要有标题和内容')
      return
    }
    if (!options.value.find(i => i.value === correctAnswer.value)) {
      message.error('正确答案需要在选项中')
      return
    }
  }
  if (!questionDescription.value) {
    message.error('需要有题目描述')
    return
  }
  if (!correctAnswer.value) {
    message.error('需要有正确答案')
    return
  }
  const question: CreateReadingQuestion = {
    type: questionType.value,
    title: questionTitle.value,
    description: questionDescription.value,
    correctAnswer: correctAnswer.value,
    analysis: anaylsis.value,
    options: options.value.map(i => i),
  }
  emit('confirm', question, props.editingIndex)
  handleClear()
}
function handleClose() {
  emit('close')
}
function handleClear() {
  questionType.value = 0
  questionTitle.value = ''
  questionDescription.value = ''
  correctAnswer.value = ''
  anaylsis.value = ''
  options.value = []
}
</script>

<template>
  <PopPanel
    v-if="visible"
    width="50%" cancel-text="清除编辑" confirm-text="暂存题目" title="编辑题目" @cancel="handleClear"
    @confirm="handleConfirm" @close="handleClose"
  >
    <div class="form-container">
      <Select
        v-model="questionType" label="题目类型:" placeholder="请选择题目类型" :options="[{
          label: '选择题',
          value: 0,
        }, {
          label: '简答题',
          value: 1,
        }]"
      />
      <TextInput v-if="questionType === 1" v-model="questionTitle" label="题目标题:" placeholder="请输入题目标题" />
      <TextArea v-model="questionDescription" label="题目描述:" placeholder="请输入题目描述" />
      <div v-if="questionType === 0" class="option-container">
        <div v-for="option in options" :key="option.label" class="option-item">
          <TextInput v-model="option.label" label="选项标题:" placeholder="请输入选项标题" />
          <TextInput v-model="option.value" label="选项内容:" placeholder="请输入选项内容" />
        </div>
        <button @click="options.push({ label: '', value: '' })">
          添加选项
        </button>
      </div>
      <Select
        v-if="questionType === 0" v-model="correctAnswer" label="正确答案:" placeholder="请选择正确答案" :options="options.map(i => ({
          label: i.label,
          value: i.value,
        }))"
      />
      <TextArea v-if="questionType === 1" v-model="correctAnswer" :min-height="100" label="正确答案:" placeholder="请输入正确答案" />
      <TextArea v-model="anaylsis" label="解析:" placeholder="请输入解析" />
    </div>
  </PopPanel>
</template>

<style scoped>
.form-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0;
}

.option-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.option-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.option-container button {
  align-self: flex-start;
  margin-top: 8px;
  padding: 8px 16px;
  font-size: 14px;
  background: var(--primary-color-200);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.option-container button:hover {
  background: var(--primary-color);
}
</style>
